<template>
  <el-form
    ref="formRef"
    :model="modelForm"
    :rules="formRules"
    :label-width="labelWidth"
    :inline="inline"
  >
    <template v-for="(item, index) in formConfig">
      <el-form-item
        v-if="!(item.hidden && item.hidden(modelForm))"
        :key="index"
        :label="item.label"
        :style="item.style"
        :prop="item.prop"
        :class="item.class"
        :required="item.required"
      >
        <template v-if="item.render">
          <component :is="item.render(modelForm)"></component>
        </template>
        <template v-if="item.type == 'text' || !item.type">
          {{ modelForm[item.prop] }}
        </template>
        <template v-if="item.type == 'input'">
          <el-input v-model.trim="modelForm[item.prop]" v-bind="item.setting" :disabled="item.disabled&&item.disabled(modelForm)" />
        </template>
        <template v-if="item.type == 'input-number'">
          <el-input-number
            v-model="modelForm[item.prop]"
            v-bind="item.setting"
            :disabled="item.disabled&&item.disabled(modelForm)"
          />
        </template>
        <template v-if="item.type == 'select'">
          <el-select v-model="modelForm[item.prop]" v-bind="item.setting" :disabled="item.disabled&&item.disabled(modelForm)" @change="item.onChange&&item.onChange(modelForm)">
            <el-option
              v-for="selectTtem in item.options"
              :key="selectTtem.value"
              :label="selectTtem.label"
              :value="selectTtem.value"
              :disabled="selectTtem.disabled"
            />
          </el-select>
        </template>
        <!-- <template v-if="item.type == 'tree'">
        <el-tree-select
          v-model="modelForm[item.prop]"
          :data="item.options"
          :props="treeProps"
          :render-after-expand="false"
        ></el-tree-select>
      </template> -->

        <template v-if="item.type == 'switch'">
          <el-switch v-model="modelForm[item.prop]" v-bind="item.setting" :disabled="item.disabled&&item.disabled(modelForm)" />
        </template>
        <template v-if="item.type == 'checkbox-group'">
          <el-checkbox-group
            v-model="modelForm[item.prop]"
            v-bind="item.setting"
          >
            <el-checkbox
              v-for="(checkItem, checkIndex) in item.options"
              :key="checkIndex"
              :value="checkItem.value"
              >{{ checkItem.label }}</el-checkbox
            >
          </el-checkbox-group>
        </template>
        <template v-if="item.type == 'checkbox'">
          <el-checkbox v-model="modelForm[item.prop]" v-bind="item.setting" :disabled="item.disabled&&item.disabled(modelForm)" />
        </template>
        <template v-if="item.type == 'radio-group'">
          <el-radio-group v-model="modelForm[item.prop]" v-bind="item.setting">
            <el-radio
              v-for="(radioItem, radioIndex) in item.options"
              :key="radioIndex"
              :value="radioItem.value"
              >{{ radioItem.label }}</el-radio
            >
          </el-radio-group>
        </template>
        <template v-if="item.type == 'slot'">
          <slot :name="item.prop"></slot>
        </template>
        <template v-if="item.type == 'button'">
          <el-button v-bind="item.setting" :disabled="item.disabled&&item.disabled(modelForm)" @click="item.onClick&&item.onClick(modelForm)">{{ item.name }}</el-button>
        </template>
        <!-- <template v-if="item.type == 'picker'">
        <el-date-picker
          v-model="modelForm[item.prop]"
          v-bind="item.setting"
        ></el-date-picker>
      </template>
      <template v-if="item.type == 'time'">
        <el-time-picker
          v-model="modelForm[item.prop]"
          v-bind="item.setting"
        ></el-time-picker>
      </template>
      <template v-if="item.type == 'datePicker'">
        <el-date-picker
          v-model="modelForm[item.prop]"
          :type="item.datePicker"
          v-bind="item.setting"
        ></el-date-picker>
      </template> -->
      </el-form-item>
    </template>
  </el-form>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
const formRef = ref();
const modelForm = defineModel();
const props = defineProps({
  inline: {
    type: Boolean,
    default: false,
  },
  labelWidth: {
    type: String,
    default: "auto",
  },
  formRules: {
    type: Object,
    default: {},
  },
  formConfig: {
    type: Object,
    default: [
      {
        model: String,
        type: String,
        label: String,
        prop: String,
        setting: {
          size: String,
          placeholder: String,
          class: String,
          style: String,
          disabled: Boolean,
        },
        options: [
          {
            label: String,
            value: String,
          },
        ],
      },
    ],
  },
});

const validate = (callback) => {
  formRef.value.validate((valid) => {
    callback(valid);
  });
};
const resetFields = () => {
  formRef.value.resetFields()
}

onMounted(() => {
  props.formConfig.forEach(item => {
    if (item.type == 'select' && item.setting?.remote && item.setting?.remoteMethod) {
      item.setting?.remoteMethod(modelForm.value).then(options => {
        item.options = options
      })
    }
  });
})

onUnmounted(() => {

})

defineExpose({ formRef, validate, resetFields });
</script>

